<template>
    <div class="contentPage">
        <div class="pageTitle">到账明细</div>
        <Search :data="params.searchData" @search="getSearch"/>
        <div class="tableBox">
            <div style="text-align: left">平安银行总到账金额：{{params.money}}元  <span style="margin-left: 12px">余额：{{params.balance}}</span></div>
            <a-table style="margin-top: 12px" :dataSource="params.dataSource" :columns="params.columns" row-key="id"
                     :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'status'">
                        <div :style="record.status === 0 ? 'color:red':''">{{record.status === 1 ? '正常' : '未上线'}}</div>
                    </template>
                </template>
            </a-table>
            <a-pagination style="margin-top: 12px" show-size-changer v-model:current="params.page"
                          :total="params.total" @showSizeChange="onShowSizeChange" @change="onShowPageChange"/>
        </div>
    </div>
</template>
<script setup>
import {onMounted, reactive} from 'vue'
import {
    getBankLogList
} from '../../../api/project.js'
import Search from '../../../components/search/index.vue'
const params = reactive({
    page: 1,
    pageSize: 10,
    total: 11,
    searchData: [
        {name: '日期查询', type: 'picker', val: [], key: ['dateLeft', 'dateRight']},
    ],
    searchVal: {},
    dataSource: [],
    columns: [
        {title: '支付流水号', dataIndex: 'bill_no', key: 'bill_no'},
        {title: '到账金额', dataIndex: 'amount', key: 'amount'},
        {title: '到账时间', dataIndex: 'create_time', key: 'create_time'},
    ],
    money: 0,
    balance: 0
})
onMounted(() => {
    getList()
})
const onShowPageChange = (page) => {
    params.page = page
    getList()
}
const onShowSizeChange = (current, pageSize) => {
    params.pageSize = pageSize;
    getList()
}
const getList = () => {
    let data = {
        ...params.searchVal,
        page: params.page,
        pageSize: params.pageSize,
    }
    getBankLogList(data).then(res => {
        params.balance = res.data.balance
        params.money = res.data.totalMoney
        params.dataSource = res.data.items
        params.total = res.data.total
    })
}
const getSearch = (e) => {
    params.searchVal = e
    getList()
}
</script>
<style scoped lang="less">
@import "./style.less";
</style>
